<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>

</head>
<body>
    <button id="in">淡入</button>
    <button id="out">隐藏</button>
    <button id="inout">淡入/隐藏</button>

    <div id="div1" style="width:80px;height: 80px;background: blue;display:none"></div>  <!--display是隐藏-->
    <div id="div2" style="width:80px;height: 80px;background: purple;display:none"></div>
    <div id="div3" style="width:80px;height: 80px;background: red;display:none"></div>

    <script>
    $(document).ready(function(){
        $("#in").click(function(){
            $("#div1").fadeIn(1000);
            $("#div2").fadeIn(1000);
            $("#div3").fadeIn(1000);
        });
        $("#out").click(function(){
            $("#div1").fadeOut(1000);
            $("#div2").fadeOut(1000);
            $("#div3").fadeOut(1000);
        });
        $("#inout").click(function(){
            $("#div1").fadeToggle(1000);
            $("#div2").fadeToggle(1000);
            $("#div3").fadeToggle(1000);
        });
    });
    </script>
</body>
</html>